<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户登录 - 安全便捷的登录体验</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 - 冷色调主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E88E5', // 冷蓝色
                        secondary: '#26C6DA', // 青色
                        accent: '#0288D1', // 亮蓝色
                        neutral: {
                            100: '#F0F7FF', // 极浅蓝背景
                            200: '#E0EFFF',
                            300: '#BBDEFB',
                            400: '#90CAF9',
                            500: '#64B5F6',
                            600: '#42A5F5',
                            700: '#1E88E5',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(30, 136, 229, 0.1)',
                        'hover': '0 20px 40px -5px rgba(30, 136, 229, 0.2)',
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .bg-gradient-cold {
        background: linear-gradient(135deg, #1E88E5 0%, #26C6DA 100%);
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }
  </style>
</head>

<body class="font-inter bg-neutral-100 min-h-screen text-neutral-700 antialiased">

    <!-- 统一导航菜单 -->
    <!-- <nav class="bg-white border-b border-neutral-200 sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <div class="flex-shrink-0 flex items-center">
                    <i class="fa fa-cube text-primary text-xl mr-2"></i>
                    <span class="font-medium text-lg">智能运维平台</span>
                </div>
                <div class="hidden sm:ml-6 sm:flex sm:space-x-6">
                    <a href="登录.html" class="border-primary text-primary inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-sign-in mr-1"></i> 登录
                    </a>
                    <a href="注册.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-user-plus mr-1"></i> 注册
                    </a>
                    <a href="多模态.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-line-chart mr-1"></i> 多模态评估
                    </a>
                    <a href="聊天助手.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-comment mr-1"></i> 聊天助手
                    </a>
                    <a href="使用率.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-microchip mr-1"></i> 性能监控
                    </a>
                    <a href="ai.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-bug mr-1"></i> 故障诊断
                    </a>
                    <a href="os运维场景.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-server mr-1"></i> 运维场景
                    </a>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <button type="button" class="p-2 rounded-full text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 focus:outline-none">
                    <i class="fa fa-cog"></i>
                </button>
            </div>
        </div>
    </div> -->

    <!-- 移动端菜单 -->
    <div class="sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
            <a href="登录.html"
                class="bg-primary text-white block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">
                <i class="fa fa-sign-in mr-1"></i> 登录
            </a>
            <a href="注册.html"
                class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-user-plus mr-1"></i> 注册
            </a>
            <a href="多模态.html"
                class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-line-chart mr-1"></i> 多模态评估
            </a>
            <a href="聊天助手.html"
                class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-comment mr-1"></i> 聊天助手
            </a>
            <a href="使用率.html"
                class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-microchip mr-1"></i> 性能监控
            </a>
            <a href="ai.html"
                class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-bug mr-1"></i> 故障诊断
            </a>
            <a href="os运维场景.html"
                class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-server mr-1"></i> 运维场景
            </a>
        </div>
    </div>
    </nav>
    <div class="flex flex-col md:flex-row min-h-screen">
        <!-- 左侧品牌区域 - 冷色调渐变 -->
        <div
            class="hidden md:flex md:w-1/2 bg-gradient-cold p-12 flex-col justify-center text-white relative overflow-hidden">
            <!-- 装饰图形 -->
            <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
            <div class="absolute bottom-0 left-0 w-96 h-96 bg-white/10 rounded-full -ml-48 -mb-48"></div>

            <div class="relative z-10 max-w-md">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow mb-6">
                    欢迎回来
                </h1>
                <p class="text-white/90 text-lg mb-10">
                    登录您的账户，继续您的个性化体验。我们致力于为您提供安全、高效的服务。
                </p>

                <div class="space-y-6">
                    <div class="flex items-center space-x-4 bg-white/10 p-4 rounded-xl backdrop-blur-sm">
                        <div class="bg-white/20 p-3 rounded-lg">
                            <i class="fa fa-shield text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold">安全保障</h3>
                            <p class="text-white/80 text-sm">多重加密保护您的数据安全</p>
                        </div>
                    </div>

                    <div class="flex items-center space-x-4 bg-white/10 p-4 rounded-xl backdrop-blur-sm">
                        <div class="bg-white/20 p-3 rounded-lg">
                            <i class="fa fa-bolt text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold">快速访问</h3>
                            <p class="text-white/80 text-sm">一键登录，无缝体验</p>
                        </div>
                    </div>

                    <div class="flex items-center space-x-4 bg-white/10 p-4 rounded-xl backdrop-blur-sm">
                        <div class="bg-white/20 p-3 rounded-lg">
                            <i class="fa fa-lock text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold">隐私保护</h3>
                            <p class="text-white/80 text-sm">严格遵守隐私政策，保护您的信息</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧登录表单区域 -->
        <div class="w-full md:w-1/2 flex items-center justify-center p-6 md:p-12">
            <div class="w-full max-w-md w-[350px]">
                <!-- 移动端品牌标识 -->
                <div class="md:hidden flex justify-center mb-10">
                    <h1 class="text-2xl font-bold text-primary">Logo</h1>
                </div>

                <div class="text-center mb-10">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700 mb-2">登录您的账户</h2>
                    <p class="text-neutral-500">请输入您的账号信息以继续</p>
                </div>

                <!-- 登录表单 -->
                <form id="loginForm" class="space-y-6">
                    <!-- 邮箱/用户名输入 -->
                    <div class="space-y-2">
                        <label for="email" class="block text-sm font-medium text-neutral-600">邮箱或用户名</label>
                        <div class="relative">
                            <div
                                class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-neutral-400">
                                <i class="fa fa-user"></i>
                            </div>
                            <input type="text" id="email"
                                class="w-full pl-10 pr-4 py-3 rounded-xl border border-neutral-200 bg-white focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-custom"
                                placeholder="请输入邮箱或用户名" required>
                        </div>
                    </div>

                    <!-- 密码输入 -->
                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <label for="password" class="block text-sm font-medium text-neutral-600">密码</label>
                            <a href="#" class="text-sm text-primary hover:text-primary/80 transition-custom">忘记密码?</a>
                        </div>
                        <div class="relative">
                            <div
                                class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-neutral-400">
                                <i class="fa fa-lock"></i>
                            </div>
                            <input type="password" id="password"
                                class="w-full pl-10 pr-10 py-3 rounded-xl border border-neutral-200 bg-white focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-custom"
                                placeholder="请输入密码" required>
                            <button type="button" id="togglePassword"
                                class="absolute inset-y-0 right-0 pr-3 flex items-center text-neutral-400 hover:text-neutral-700 transition-custom">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 记住我选项 -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input type="checkbox" id="remember"
                                class="w-4 h-4 rounded border-neutral-300 text-primary focus:ring-primary/20">
                            <label for="remember" class="ml-2 text-sm text-neutral-600">记住我 30 天</label>
                        </div>
                    </div>

                    <!-- 登录按钮 -->
                    <button type="submit"
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-xl transition-custom flex items-center justify-center group">
                        <span>登录账户</span>
                        <i class="fa fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                    </button>

                    <!-- 分隔线 -->
                    <div class="relative flex items-center">
                        <div class="flex-grow h-px bg-neutral-200"></div>
                        <span class="px-4 text-sm text-neutral-400">或使用以下方式登录</span>
                        <div class="flex-grow h-px bg-neutral-200"></div>
                    </div>

                    <!-- 社交登录 -->
                    <div class="grid grid-cols-3 gap-4">
                        <button type="button"
                            class="flex items-center justify-center py-3 border border-neutral-200 rounded-xl hover:bg-neutral-50 transition-custom">
                            <i class="fa fa-weixin text-[#07C160] text-xl"></i>
                        </button>
                        <button type="button"
                            class="flex items-center justify-center py-3 border border-neutral-200 rounded-xl hover:bg-neutral-50 transition-custom">
                            <i class="fa fa-qq text-[#12B7F5] text-xl"></i>
                        </button>
                        <button type="button"
                            class="flex items-center justify-center py-3 border border-neutral-200 rounded-xl hover:bg-neutral-50 transition-custom">
                            <i class="fa fa-github text-neutral-700 text-xl"></i>
                        </button>
                    </div>
                </form>

                <!-- 注册提示 -->
                <div class="mt-10 text-center">
                    <p class="text-neutral-500">
                        还没有账户?
                        <a href="register.html"
                            class="font-medium text-primary hover:text-primary/80 transition-custom">立即注册</a>
                    </p>
                </div>

                <!-- 页脚 -->
                <div class="mt-12 text-center text-xs text-neutral-400">
                    <p>登录即表示您同意我们的
                        <a href="#" class="hover:text-primary transition-custom">服务条款</a> 和
                        <a href="#" class="hover:text-primary transition-custom">隐私政策</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 密码显示/隐藏切换
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');

        togglePassword.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);

            // 切换图标
            togglePassword.querySelector('i').classList.toggle('fa-eye');
            togglePassword.querySelector('i').classList.toggle('fa-eye-slash');
        });

        // 表单提交处理
        const loginForm = document.getElementById('loginForm');
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();

            // 在实际应用中，这里会有表单验证和API请求
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;

            // 简单模拟登录成功
            if (email && password) {
                alert('登录成功！在实际应用中，这里会跳转到主页。');
            }
        });

        // 添加输入框焦点效果
        const inputs = document.querySelectorAll('input');
        inputs.forEach(input => {
            input.addEventListener('focus', () => {
                input.parentElement.classList.add('scale-[1.02]');
                input.parentElement.style.transition = 'transform 0.2s ease';
            });

            input.addEventListener('blur', () => {
                input.parentElement.classList.remove('scale-[1.02]');
            });
        });
    </script>
</body>

</html>